<template>
  <view class="">
    <view class="flex align-stretch benben-position-layout flex searchFor_flex_0" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex align-center justify-between flex-sub searchFor_fd0_0'>
            <view class='flex align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
                <text class='fu-iconfont2  searchFor_fd0_0_c0_c0'>&#xE794;</text>
            </view>
            <view class='flex align-center flex-sub searchFor_fd0_0_c1'>
                <text class='fu-iconfont2  searchFor_fd0_0_c1_c0'>&#xe77e;</text>
                <input class='flex-sub searchFor_fd0_0_c1_c1' type="text" :placeholder="$t('请输入关键字')" confirm-type="done" :maxlength="-1" placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx" @confirm="searchMap()" v-model="keywords" />
            </view>
            <view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
                <text class='searchFor_fd0_0_c2_c0'>{{$t('取消')}}</text>
            </view>
        </view>
    </view>
    <view :style="{height: '88rpx'}"></view>
    <view class="">
      <map class="map" ref="map1" :controls="controls" :scale="scale" :longitude="lng" :latitude="lat"
        :show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew" :show-compass="showCompass"
        :enable-overlooking="enableOverlooking" :enable-zoom="enableZoom" :enable-scroll="enableScroll"
        :enable-rotate="enableRotate" :enable-satellite="enableSatellite" :enable-traffic="enableTraffic"
        :markers="markers" :polyline="polyline" :circles="circles" :polygons="polygons" :include-points="includePoints"
        @markertap="mtap" @callouttap="calltap" @labeltap="labeltap"></map>
    </view>
  </view>
</template>

<script >
  export default{
    data(){
      return {
        keywords:'',
        markers: [],
        controls: [{
          id: 1,
          position: {
            left: 5,
            top: 180,
            width: 30,
            height: 30
          },
          iconPath: '',
          clickable: true
        }],
        scale: 11,
        showLocation: true,
        rotate: 0,
        skew: 0,
        showCompass: false, //指南针
        enableOverlooking: false,
        enableZoom: false,
        enableScroll: false,
        enableRotate: false,
        enableSatellite: false,
        enableTraffic: false,
        polyline: [],
        circles: [],
        polygons: [],
        includePoints: [],
        enable3D: false,
        lat: '',
        lng: '',
        covers: [],
        lists:[]
      }
    },
    onLoad() {
      let that=this
      uni.getLocation({
        type: 'gcj02',
        geocode: true,
        success: (res) => {
          that.lat = res.latitude;
          that.lng = res.longitude;
        }
      })
      this.getList()
    },
    methods:{
      mtap(e){
        let _this = this
        let markObj = _this.markers[e.detail.markerId - 1];
        uni.navigateTo({
          url:`/pages/map/maptwo?latitude=${markObj.latitude}&longitude=${markObj.longitude}&housingaddress_id=${markObj.val.housingaddress_id}`
        })
      },
      labeltap(e) {
        console.log(e, "labeltap");
      },
      calltap(e) {
        console.log(e, "calltap");
      },
      regionchange(e) {
        // console.log(e, "dfgdfgdf");
      },
      searchMap(){
        this.getList()
      },
      getList(){
        let _this=this
        this.$api.post(global.apiUrls.post655eeec28cd5f,{
          keywords:this.keywords
        }).then(res=>{
          if(res.data.code==1){
            this.lists=res.data.data
            this.circles = this.lists.map((val, key) => {
              let obj = {};
              obj.latitude = val.address_lat;
              obj.longitude = val.address_lng;
              obj.radius = 4000;
              obj.strokeWidth = 0;
              obj.color = '#0181ff';
              obj.fillColor = '#0181ff';
              return obj;
            })
            _this.markers = _this.lists.map((val, key) => {
              let obj = {};
              obj.id = key + 1;
              obj.latitude = parseFloat(val.address_lat);
              obj.longitude = parseFloat(val.address_lng);
              obj.val = val;
              // obj.width = "12";
              // obj.height = '12';
              // obj.iconPath = '/static/images/icon_map.png';
              let lab = {};
              lab.content = val.name+val.house_count;
              lab.color = "white";
              lab.textAlign = "center";
              obj.label = lab;
              return obj;
            })
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  .map {
    width: 100vw;
    // position: absolute;
    // z-index: 99;
    // height: calc(100vh * 0.7);
    height: 100vh;
    margin-top: 100rpx;
  }

  .searchFor_flex_0 {
      background: #fff;
      width: 750rpx;
      height: 88rpx;
      overflow: hidden;
      z-index: 10;
      top: 0rpx;
      background-size: 100% auto !important;
  }
  .searchFor_fd0_0_c2_c0 {
      color: #333333;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 40rpx;
      margin: 0rpx 0rpx 0rpx 6rpx;
  }

  .searchFor_fd0_0_c1_c1 {
      font-size: 28rpx;
      font-weight: 400;
      color: #333;
  }

  .searchFor_fd0_0_c1_c0 {
      font-size: 31rpx;
      color: rgba(153, 153, 153, 1);
      margin: 0rpx 13rpx 0rpx 0rpx;
  }

  .searchFor_fd0_0_c1 {
      background: #F9F9F9;
      height: 64rpx;
      border-radius: 34rpx 34rpx 34rpx 34rpx;
      padding: 0rpx 35rpx 0rpx 35rpx;
      margin: 0rpx 32rpx 0rpx 40rpx;
  }

  .searchFor_fd0_0_c0_c0 {
      font-size: 36rpx;
      font-weight: 500;
      color: #333;
  }

  .searchFor_fd0_0 {
      padding: 0rpx 24rpx 0rpx 24rpx;
      line-height: 88rpx;
  }
</style>
